<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 创建丰富背景 */

        /* 水平 */
        .box1 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: linear-gradient(#fb3 50%, #58a 50%);
            /* background: linear-gradient(#fb3 20%, #58a 80%); */
            /* 第一个值表示宽度，第二个值表示高度 */
            background-size: 100% 30px;
        }

        /* 垂直 */
        .box2 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: linear-gradient(to right, #fb3 50%, #58a 50%);
            background-size: 30px 100%;
        }

        /* 倾斜一定角度 */
        .box3 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: repeating-linear-gradient(45deg,
                    #fb3, #fb3 15px, #58a 0, #58a 30px);
        }

        /* 透明同色系条纹 */
        .box4 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: #58a;
            background-image: repeating-linear-gradient(135deg,
                    hsla(0, 0%, 100%, .2),
                    hsla(0, 0%, 100%, .2) 15px,
                    transparent 0,
                    transparent 30px);
        }

        /* 凹凸感 */
        .box5 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: rgb(255, 199, 199);
            background-image: repeating-linear-gradient(135deg,
                    rgba(255, 255, 255, 0.1),
                    rgba(0, 0, 0, 0.1) 15px,
                    transparent 0,
                    transparent 30px);
        }

        /* 网格 */
        .box6 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: rgb(237, 249, 255);
            background-image:
                linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
                linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
            background-size: 30px 30px;
        }

        /* 波点 */
        .box7 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0);
            background-size: 30px 30px;
        }

        /* 
        还可以把这些技巧与混合模式结合起来，
        对某些图层使用 background-blend-mode 属性并设置非 normal 值
        http://bennettfeely.com/gradients
        */


    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>

</body>

</html>